<template>
  <div id="notice-info">
    <ContentField>
      <template v-slot:content-field-card-name>通知列表</template>
      <template v-slot:content-field-card-button></template>
      <template v-slot:content-field-card-body>
        <div
          id="notice-info-table-info"
          style="position: relative"
          v-if="table_or_order"
        >
          <el-table
            :data="talbe_info_list"
            border
            height="500"
            style="width: 100%; position: absolute"
          >
            <el-table-column prop="id" label="桌号" />
            <el-table-column prop="statusStr" label="状态" />
            <el-table-column prop="maxNum" label="最大人数" />
            <el-table-column fixed="right" label="操作">
              <template #default="scope">
                <el-button
                  type="success"
                  :icon="Check"
                  circle
                  @click="tableTableItemCleanBtnClick(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div
          id="notice-info-order-info"
          style="position: relative"
          v-if="!table_or_order"
        >
          <el-table
            :data="order_info_list"
            border
            height="500"
            style="width: 100%; position: absolute"
          >
            <el-table-column prop="tableId" label="桌号" />
            <el-table-column prop="statusStr" label="状态" />
            <el-table-column prop="sum" label="金额" />
            <el-table-column prop="clientNum" label="用餐人数" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column fixed="right" label="操作">
              <template #default="scope">
                <el-button
                  type="primary"
                  :icon="Edit"
                  circle
                  @click="orderTableItemInfoBtnClick(scope.row)"
                ></el-button>
                <el-button
                  type="success"
                  :icon="Check"
                  circle
                  @click="orderTableItemCheckOutBtnClick(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template v-slot:content-field-card-footer></template>
    </ContentField>
    <!-- 订单信息dialog -->
    <el-dialog v-model="orderInfoDialogVisible" title="订单详情">
      <el-table :data="order_item_list" border height="200">
        <el-table-column prop="remark" label="菜品" />
        <el-table-column prop="chefId" label="厨师ID" />
        <el-table-column prop="finishTime" label="完成时间" />
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-row>
            <el-col :span="6">
              <el-statistic title="总价" :value="curOrder.sum" />
            </el-col>
            <el-col :span="18">
              <el-button @click="orderInfoDialogVisible = false">
                关闭
              </el-button>
            </el-col>
          </el-row>
        </span>
      </template>
    </el-dialog>

    <!-- 确认收款dialog -->
    <el-dialog v-model="orderCheckOutDialogVisible" title="确认收款">
      <el-form :inline="true" :model="curOrder" class="demo-form-inline">
        <el-form-item label="应收款">
          <el-input v-model="curOrder.sum" disabled="true" />
        </el-form-item>
        <el-form-item label="实收款">
          <el-input v-model="curOrder.totalMoney" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="orderCheckOutDialogVisible = false">
            关闭
          </el-button>
          <el-button type="success" round @click="checkOutBtnClick"
            >确认收款</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { computed, ref, reactive } from "vue";
import { useStore } from "vuex";
import { ElNotification } from "element-plus";
import { Check, Edit } from "@element-plus/icons-vue";

export default {
  components: {
    ContentField,
  },
  setup() {
    let store = useStore();

    let table_or_order = computed(() => {
      return store.state.notice_page == 1;
    });

    // 获取所有桌子信息
    store.dispatch("get_all_table", {
      token: store.state.user.jwt_token,
    });
    // 获取所有未付款订单信息
    store.dispatch("get_all_unpaid_orders", {
      token: store.state.user.jwt_token,
    });

    let orderInfoDialogVisible = ref(false);
    let orderCheckOutDialogVisible = ref(false);
    let curOrder = reactive({});

    let talbe_info_list = computed(() => {
      let res = [];
      store.state.table.unclear_table_list.forEach((element) => {
        element.statusStr = "待清理";
        res.push(element);
      });
      return res;
    });
    let order_info_list = computed(() => {
      let res = [];
      store.state.order.unpaid_order_list.forEach((element) => {
        element.statusStr = "待付款";
        res.push(element);
      });
      return res;
    });
    let order_item_list = computed(() => {
      return store.state.order_item.order_item_list;
    });

    let bindCurOrder = (order) => {
      curOrder.sum = order.sum;
      curOrder.id = order.id;
      curOrder.clientId = order.clientId;
      curOrder.clientNum = order.clientNum;
      curOrder.tableId = order.tableId;
      curOrder.status = order.status;
      curOrder.serverId = order.serverId;
      curOrder.createTime = order.createTime;
      curOrder.finishTime = order.finishTime;
      curOrder.totalMoney = order.totalMoney;
      curOrder.isPredetermine = order.isPredetermine;
      curOrder.predetermineTime = order.predetermineTime;
    };

    // 查看订单详情按钮点击事件
    let orderTableItemInfoBtnClick = (order) => {
      // console.log(order);
      store.dispatch("get_order_item_by_order_id", {
        token: store.state.user.jwt_token,
        order_id: order.id,
      });
      bindCurOrder(order);
      orderInfoDialogVisible.value = true;
    };

    // 确认订单收款按钮点击事件
    let orderTableItemCheckOutBtnClick = (order) => {
      bindCurOrder(order);
      orderCheckOutDialogVisible.value = true;
    };

    // 确认餐桌已清理按钮点击事件
    let tableTableItemCleanBtnClick = (table) => {
      console.log(table);
      store.dispatch("modify_table_inf", {
        token: store.state.user.jwt_token,
        id: table.id,
        max_num: table.maxNum,
        remark: table.remark,
        status: 0,
        success(resp) {
          if (resp.code == 200) {
            ElNotification.success({
              title: "Success",
              message: "确认餐桌清理成功",
              offset: 100,
            });
            // 重新获取待清理餐桌
            store.dispatch("get_all_table", {
              token: store.state.user.jwt_token,
            });
          } else {
            ElNotification.error({
              title: "Error",
              message: "确认餐桌清理失败：" + resp.message,
              offset: 100,
            });
          }
        },
      });
    };

    // 确认收款dialog确认按钮点击事件
    let checkOutBtnClick = () => {
      store.dispatch("order_check_out", {
        token: store.state.user.jwt_token,
        server_id: store.state.server.id,
        order_id: curOrder.id,
        total_money: curOrder.totalMoney,
        success(data) {
          if (data.code == 200) {
            ElNotification.success({
              title: "Success",
              message: "确认收款成功",
              offset: 100,
            });
            orderCheckOutDialogVisible.value = false;
            // 重新请求未付款的账单列表
            store.dispatch("get_all_unpaid_orders", {
              token: store.state.user.jwt_token,
            });
            store.dispatch("get_all_table", {
              token: store.state.user.jwt_token,
            });
          } else {
            ElNotification.error({
              title: "Error",
              message: "确认收款失败：" + data.message,
              offset: 100,
            });
          }
        },
      });
    };

    return {
      store,
      table_or_order,
      talbe_info_list,
      order_info_list,
      Edit,
      Check,
      orderTableItemInfoBtnClick,
      orderTableItemCheckOutBtnClick,
      tableTableItemCleanBtnClick,
      order_item_list,
      orderInfoDialogVisible,
      curOrder,
      orderCheckOutDialogVisible,
      checkOutBtnClick,
    };
  },
};
</script>

<style scoped></style>
